<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>荷芯联盟</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<link rel="stylesheet" href="css/alliance.css" />
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="//res.qiaomukeji.com/plugin/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="js/moduls/islogin.js" ></script>
		<script src="js/moduls/alliance.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/distpicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	</head>

	<body>
		<div class="content" style="opacity: 0;">
			<div class="logo">
				<img src="img/logo.png" />
			</div>
			<div class="theme">
				<img src="img/theme.png" />
			</div>
			<div class="subTop">
				<div class="picture">
					<img src="img/title2.png" />
				</div>
				<div class="right_items">
					<div class="rules">活动规则</div>
					<div class="rank">排行榜</div>
				</div>
			</div>
			<div class="back">
				<div class="backBtn">
					<a href="javascript:history.go(-1)"><img src="img/closeBtn.png" alt=""></a>
				</div>

			</div>
			<div class="middlePath">
				<div class="title">
					<img src="img/coreAlliance.png" alt="">
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
				<div class="midContent">
					<div class="location">

						<span>你所在的地方 :</span>
						<span id="currentSide"></span>
						<!--<div class="currentSide" data-toggle="distpicker" data-autoselect="1" style="display: inline-block;">
							<select name="province"></select>
						</div>-->
					</div>
					<div class="areaChose">
						<div class="distpicker" data-toggle="distpicker" data-autoselect="1" style="display: inline-block;">
							<select name="subProvince">
								<option value="" disabled selected="">市</option>
							</select>
						</div>
						<span class="areaSpa">
							地区筛选
						</span>
					</div>

				</div>
				<!--<div class="tableContent">-->
					<div class="innerTab">
						<table style="border-collapse:collapse;    margin: 0 auto;">
							<thead>
								<tr>
									<td class="active">联盟名称</td>
									<td>创建日期</td>
									<td>人数</td>
									<td>荣誉值</td>
									<td>区域</td>
								</tr>
							</thead>
							
						</table>
					</div>
				<!--</div>-->
				<div  class="innerTab2">
					<table >
						<tbody>
								<tr v-for="(teamInfo,index) in teamInfos" :key="index" @click="toAlliance(teamInfo.id)">
									<td>
										<div>{{teamInfo.name}}</div>
									</td>
									<td>{{teamInfo.date}}</td>
									<td>{{teamInfo.peopleNum}}</td>
									<td>{{teamInfo.honor}}</td>
									<td>{{teamInfo.address}}</td>
								</tr>
							</tbody>
					</table>
					
				</div>
				<div class="page">
					<!--<span>页码</span>
					<span>1</span>
					<span>2</span>
					<span>3</span>
					<span>4</span>
					<span>5</span>
					<span>6</span>-->
				</div>

				<div class="line">
					<img src="img/line.png" alt="">

				</div>
				<div class="createA">我要创建联盟</div>
				<div class="bottom-logo">
					<img src="img/bottom_logo2.png" />
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '.content',
				data: {
					teamInfos: []
				},
				methods: {
					toAlliance(id) {
						console.log(id);
						location.href = "joinAlliance.html?teamId=" + id;
					}
				}
			})
			//筛选地理位置
			$.get('https://restapi.amap.com/v3/ip?key=4f8794682030dea431e12c4256e705f5', function(res) {
				console.log(res);
				var t_province = res["province"];
				$("#currentSide").html(t_province)
				document.getElementsByName("subProvince")[0].value = 'a';

				$(".areaChose").change(function() {
					//要触发的事件
					var options = $(".areaChose option:selected"); //获取选中的项
					console.log(options.val())
					$("#currentSide").html(options.val())
					$(".areaSpa").hide();
					getAddress()
				});

				$(".areaSpa").click(function() {
					$(".distpicker select").click()
				})
				getAddress()
			})

			function getAddress() {
				var t_address = $("#currentSide").html();
				console.log(t_address)
				//获取联盟
				getTeamInfo(t_address, function(_res) {
//					for(var i = 0; i < _res.team.length % 5; i++) {
//						var t_team = {
//							"honor": "",
//							"address": ""
//						}
//						_res.team.push(t_team)
//					}
					app.teamInfos = _res.team;
					
					$(".content").css("opacity",1);
				})
			}
		</script>
		<script src="js/alliance.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>